<template>
  <div id="bookShelf">
    <div v-if="show">
      <com-head :opacity="0">我的书架</com-head>
      <div class="kong">
        <div class="img">
          <img src="../assets/image/kong.png">
        </div>
        <p>书架空空，等您填满</p>
        <div class="btn">
          <com-button class="box2" :click="toBookmall">去书城看看</com-button>
        </div>
      </div>
    </div>
    <div class="ebookbg" v-if="1">
      <div class="ebookTop">
        <div class="sellwell">
          <div class="bookList">
            <div class="left" v-if="item.cover">
              <img :src="item.cover">
            </div>
            <router-link class="img img1" v-if="!item.cover" tag="div" :to="{name:'bookMall',query:{active: '0'}}">
              <img src="../assets/image/add.png">
            </router-link>
            <div class="right">
              <p class="name">{{item.name}}</p>
              <div class="pagenum">
                <div>读至{{item.number}}</div>
                <div class="continue" @click="continueRead(item.id)">继续阅读
                  <img src="../assets/image/continue.png">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bookitem">
        <div
          class="item"
          v-for="(item,index) in list"
          :key="item.book_id"
          @touchstart="gtouchstart()"
          @touchmove="gtouchmove()"
          @touchend="gtouchend()"
        >
          <div v-if="iconShow" class="mask" @click="selectbook(index)"></div>
          <div class="img" @click="getdetail(item.book_id)">
            <img :src="item.cover">
            <i v-if="iconShow" class="select iconfont icon-quan"/>
            <i v-if="item.selected" class="select iconfont icon-2xuanzhong"/>
          </div>
          <div class="name">{{item.name}}</div>
        </div>

        <router-link class="item" tag="div" :to="{name:'bookMall',query:{active: '0'}}">
          <div class="img img1" v-if="list.length">
            <img src="../assets/image/add.png">
          </div>
        </router-link>
      </div>
      <div v-if="!list.length" style="margin-top: 30px; text-align: center;">暂无书籍</div>
      <div class="buyBtn" :class="{active: selected}" v-if="iconShow">
        <div class="box" @click="allselect">
          <i v-show="!selected" class="iconfont icon-quan"/>
          <i v-show="selected" class="iconfont icon-xuanzhong"/>&nbsp;全选
        </div>
        <com-button :click="deletelist">
          <i class="iconfont icon-shanchu1"/> 删除
        </com-button>
      </div>
    </div>

    <com-foot :select="2"></com-foot>
  </div>
</template>

<script>
export default {
  name: "bookShelf",
  data() {
    return {
      show: false,
      iconShow: false,
      selected: false,
      checkedid: [],
      timeOutEvent: "",
      item: {
        cover: "",
        name: "",
        pagenum: ""
      },
      list: []
    };
  },

  created() {
    this.loading();
    // this.mymessage.splice(index, 1);
  },

  mounted() {},

  methods: {
    loading() {
      this.axios
        .post("index/racklist", {
          token: this.token()
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.item = data.record;
            this.list = data.data;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          } else if (data.code === "204") {
            this.show = true;
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 删除收藏
    deletelist() {
      let id = [];
      this.checkedid.forEach(element => {
        id.push(element.book_id);
      });
      console.log(id);
      // console.log(this.checkedid.book_id.join());
      this.axios
        .post("index/remove", {
          token: this.token(),
          bookrack_id: id.join() + ","
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.$bus.$emit("toast", data.msg);
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    getdetail(id){
      this.$router.push({name:'ebookDetail',query: {id: id}});
    },
    continueRead(id) {
      // 继续阅读
      this.$router.push({ name: "pageContent", query: { status: "1" } });
    },
    toBookmall() {
      this.$router.push("bookMall");
    },
    // 选中
    selectbook(index) {
      // console.log(index);
      this.list[index].selected = !this.list[index].selected;
      // 判断是否全部选中
      let bool = this.list.every((item, index) => {
        return item.selected == true;
      });
      if (bool) {
        this.selected = true;
      } else {
        this.selected = false;
      }
      let idselected = this.list.filter((item, index, array) => {
        return item.selected == true;
      });
      this.checkedid = idselected;
      console.log(idselected);
    },
    // 全选
    allselect() {
      if (this.selected) {
        this.selected = false;
        this.list.forEach(element => {
          element.selected = false;
        });
      } else {
        this.selected = true;
        this.list.forEach(element => {
          element.selected = true;
        });
      }
      let idselected = this.list.filter((item, index, array) => {
        return item.selected == true;
      });
      this.checkedid = idselected;
      console.log(idselected);
    },
    //开始按
    gtouchstart(id) {
      console.log("开始按");
      this.timeOutEvent = setTimeout(() => {
        this.longPress();
      }, 500); //这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适
      return false;
    },
    //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    gtouchend(id) {
      console.log("取消啦");
      clearTimeout(this.timeOutEvent); //清除定时器
      if (this.timeOutEvent != 0) {
        //这里写要执行的内容（尤如onclick事件）
        console.log("你这是点击，不是长按");
      }
      return false;
    },
    //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    gtouchmove() {
      console.log("移动啦");
      clearTimeout(this.timeOutEvent); //清除定时器
      this.timeOutEvent = 0;
    },
    //真正长按后应该执行的内容
    longPress() {
      console.log("长按啦");
      this.iconShow = true;
      clearTimeout(this.timeOutEvent);
      this.timeOutEvent = 0;
      //执行长按要执行的内容，如弹出菜单
    }
  }
};
</script>
<style lang='scss'>
#bookShelf {
  // padding-top: 0;
  background-color: #fff;
  #pageHead {
    box-shadow: none;
    .icon-fanhui {
      display: none;
    }
  }
  .kong {
    text-align: center;
    background-color: #fff;
    padding-top: 270px;
    .img {
      display: inline-block;
      width: 380px;
      height: 300px;
      img {
        width: 100%;
      }
    }
    p:nth-of-type(1) {
      // margin-top: 30px;
      font-size: 32px;
      font-family: Didot-Bold;
      color: #555;
      // line-height: 78px;
    }
    .btn {
      width: 500px;
      margin: 0 auto;
      margin-top: 80px;
      .box1 {
        background-color: #ff7a13;
      }
    }
  }
  .ebookbg {
    margin-top: -88px;
    background: url(../assets/image/shelfbg.png) no-repeat;
    background-size: contain;
    background-color: #fff;
  }
  .ebookTop {
    height: 290px;
    position: relative;
    .sellwell {
      position: absolute;
      top: 113px;
      padding: 0 32px;
      box-sizing: border-box;
      .bookList {
        height: 340px;
        display: flex;
        justify-content: space-between;
        .left {
          width: 200px;
          height: 260px;
          border-radius: 6px;
          margin-top: 40px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      .img1 { 
        width: 200px;
        height: 260px;
        border-radius: 6px;
        margin-top: 40px;   
        background-color: #f9f9f9;
        img {
          display: block;
          margin: 80px auto;
          width: 52px;
          height: 52px;
        }
      }
        .right {
          // width: 458px;
          height: 240px;
          margin-top: 90px;
          margin-left: 40px;
          // display: flex;
          // flex-direction: column;
          // justify-content: space-between;
          font-size: 26px;
          color: rgba(153, 153, 153, 1);
          .name {
            color: #222;
            font-size: 32px;
            font-weight: 700;
          }
          .pagenum {
            font-size: 26px;
            color: #555;
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
            .continue {
              margin-left: 60px;
              img {
                width: 20px;
                height: 20px;
              }
            }
          }
        }
      }
    }
  }
  .bookitem {
    margin-top: 188px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .mask {
      background-color: rgba(255, 255, 255, 0.3);
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 99;
    }
    .item {
      width: 250px;
      text-align: center;
      position: relative;
      .img {
        width: 180px;
        height: 234px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
        img {
          width: 100%;
        }
      }
      .img1 {     
        background-color: #f9f9f9;
        img {
          margin: 80px auto;
          width: 52px;
          height: 52px;
        }
      }
      .name {
        line-height: 80px;
        font-size: 28px;
        color: #222;
      }
    }
    .select {
      width: 30px;
      height: 30px;
      border-radius: 15px;
      position: absolute;
      bottom: 20px;
      right: 10px;
    }
    .icon-quan {
      color: rgb(184, 36, 36);
      font-weight: 700;
      z-index: 100;
    }
    .icon-2xuanzhong {
      color: #41d7bd;
      z-index: 100;
    }
  }
  .buyBtn {
    position: fixed;
    bottom: 100px;
    left: 50%;
    width: 750px;
    height: 100px;
    margin-left: -375px;
    background: #bbb;
    box-shadow: 0 -10px 10px #eee;
    display: flex;
    justify-content: space-between;
    align-self: center;
    .box {
      width: 350px;
      height: 100px;
      text-align: center;
      //   margin-left: 132px;
      line-height: 100px;
      color: #fff;
      // .icon-xuanzhong {
      //   color: #41d7bd;
      //   z-index: 1100;
      // }
    }
    .com_button {
      margin-top: 11px;
      margin-right: 32px;
      background: #fff;
      width: 360px;
      height: 76px;
      border-radius: 39px;
      color: rgba(85, 85, 85, 1);
    }
  }
  .active {
    background: #41d7bd;
    color: #41d7bd;
  }
}
</style>